<template>
  <div>
    <button @click="loadIframe('https://example.com')">加载 Example</button>
    <button @click="loadIframe('https://google.com')">加载 Google</button>
    <button @click="loadIframe('https://iedp.ujoin-tech.com/api/mechcentral?tid=51214F9F9125DF11EB65DF8B9B9E4084')">加载 百度</button>
    <button @click="clearIframe">清空 iframe</button>

    <div v-if="isLoading" class="loading">加载中...</div>

    <iframe
      v-show="iframeSrc && !isLoading"
      :src="iframeSrc"
      width="100%"
      height="500px"
      frameborder="0"
      @load="onIframeLoad"
    ></iframe>

    <p v-if="!iframeSrc">点击按钮加载内容</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const iframeSrc = ref('');
const isLoading = ref(false);

const loadIframe = url => {
  isLoading.value = true;
  iframeSrc.value = url;
};

const clearIframe = () => {
  iframeSrc.value = '';
};

const onIframeLoad = () => {
  isLoading.value = false;
};
</script>

<style scoped>
.loading {
  padding: 20px;
  color: #666;
}
</style>
